<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			Video Browse
		</title>
		<style>
			.navbar{margin-bottom: 6px;border-bottom: 1px solid #ddd;height:31px;padding:6px;}
			.navbar span{border:1px solid #ddd;padding: 4px 12px;display: block;float: left;margin-right: 5px;}
			.navbar span:hover{background: rgb(236,236,236);}
			.active {font-weight: 700;}
			.navbar a{color: #484848;font-size: 13px;text-decoration: none;}
			
			.thumbnail{display:table; width:120px;height:90px;line-height: 90px;position:relative;cursor:pointer;margin-bottom: 3px;}
			.thumbnail img{display:inline-block;max-width:120px;max-height:90px; vertical-align: middle;}
			
			.videobox{font-size: 13px;text-align: center;height: 120px;}
			.videobox:hover{background: rgb(236,236,236);}
		</style>
		<script src="../../../../aceadmin/dist/js/jquery1x.min.js"></script>
	</head>
	<body style="margin: 0px;">
		<form>
			<div id="videoCate" class="navbar">
				<span><a id="allVideo" href="javascript:loadVideo('allVideo');" class="active">全部</a></span>
			</div>
			<div id="videoGroup">
			</div>
		</form>
	</body>
	
	<script type="text/javascript">
		
		$(window).load(function(){
			$('#videoGroup').css('height',$(window).height()-55);
			$('#videoGroup').css('overflow-y',"auto");
		
			loadVideo('allVideo');
		})
		
		function loadVideo(cateId){
			var apiurl = location.href.split("?apiurl=")[1].split("&")[0];
			
			 $.ajax({
			  url: apiurl,
			  type: 'GET',
			  crossDomain: true,
			  cache: false,
			  data:{"videoCateId":cateId=="allVideo"?null:cateId},
			  dataType: "json",
			  headers: { 'Content-Type': 'application/json' },
			  xhrFields:{withCredentials: true},
			  success:function(data) {
			    
			    if(data.code == 'success') {
					$("#videoGroup").html("");
					
					if($("#videoCate").find("SPAN").length==1){
						data.body.videoCate.forEach(function(cate,index){
							var nav = $("<span><a id=\""+cate.id+"\" href=\"javascript:loadVideo('"+cate.id+"')\">"+cate.name+"</a></span>");
							$("#videoCate").append(nav);
						})
					}
					$(".active").removeClass("active");
					$("#"+cateId).addClass("active");
					
					data.body.pageInfo.list.forEach(function(video,index){
						var logoUrl=video.passenger["logoUrl"];
						var video = $("<div class='videobox' onclick=\"selectVideo('"+video.passenger["videoUrl"]+"')\" style='margin:5px;float:left;border: 1px solid #ddd;'>"
							+"<span class='thumbnail'><img alt='视频预览' src='"+logoUrl+"' /></span>"+video.name+"</div>");
						$("#videoGroup").append(video);
					})
			    }
			  },
			  error:function(e){
			       alert(e);
			 }
			})
		}
		
		function selectVideo(videoUrl){
			var callback = location.href.split("CKEditorFuncNum=")[1].split("&")[0];
			window.opener.CKEDITOR.tools.callFunction(callback, videoUrl);
			window.close();
		}
		
	</script>
</html>
